<template>
	<view class="content">
		<view class='header'>
			<view class='search'>
				<u-search placeholder="搜索你想查找的用户..."  v-model="keywords" @search="search" focus  :animation="true"></u-search>
			</view>
		</view>

		<!-- 侧滑列表 -->
		<scroll-view class="list" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered" @refresherrefresh="refresh" @scrolltolower="loadmore">
			<view class="list">
				<view class="swipe-action u-border-top u-border-bottom" v-for="item in list">
					<view class="item">
						<view class="business">
							<view class="avatar">
								<image mode="aspectFit" :src="item.business.avatar_text" v-if="item.business.avatar_text"></image>
								<image mode="aspectFit" src="/static/avatar.png" v-else></image>
							</view>
						</view>
						
						<view class="info">
							<p class="nickname" @click="ToBus(item.business.id)">{{ item.business.nickname }}</p>
							<view class="desc" v-if="item.business.intro">{{ item.business.intro }}</view>
							<view class="desc" v-else>这家伙很懒，什么也没写！</view>
							<view class="action">
								<view class="btn">
									<u-button type="primary" text="发私信" size="mini" shape="circle" @click="sendmsg(item.business.id)"></u-button>
								</view>
								<view class="btn">
									<u-button type="warning" :plain="true" :text="item.status_text" size="mini" shape="circle"></u-button>
								</view>
								<view class="btn">
									<u-button type="error" text="删除" size="mini" shape="circle" @click="del(item.id)"></u-button>
								</view>

								<view class="btn">
									<u-button type="primary" text="查看" size="mini" shape="circle" @click="ToInfo(item.id)"></u-button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 提醒组件 -->
		<u-toast ref="notice"></u-toast>

		<!-- 弹框组件 -->
		<u-modal :show="show" :title="'提醒'" :content="content" showCancelButton :closeOnClickOverlay="true" @cancel="show = false" @close="show = false" @confirm="confirm"></u-modal>


		<!-- 私信弹出层 -->
		<u-popup :show="AnswerShow" @close="AnswerShow = false">
            <view class="answer">
				<u-form labelPosition="top" labelWidth="150" :model="comment" :rules="rules" ref="answer">
					<!-- 描述 -->
					<u-form-item
						label="私信内容："
						prop="content"
						ref="content"
					>
						<u--textarea v-model="comment.content" placeholder="请输入私信内容"></u--textarea>
					</u-form-item>
	
					<view class="btn">
						<u-button type="primary" text="提交信息" formType="submit" @click="submit"></u-button>
					</view>
				</u-form>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		onLoad()
		{
			this.business = uni.getStorageSync('business') ? uni.getStorageSync('business') : {}

			this.MsgData()
		},
		data()
		{
			return {
				content: `
					<b>这个是正文内容</b>
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
				`,
				comment:{
					content: '',
				},
				rules:{
					content: {
						type: 'string',
						required: true,
						message: '请填写私信内容',
						trigger: ['blur', 'change']
					},
				},
				AnswerShow: false,
				triggered: false,
				finished: false,
				scrollTop: 0,
				keywords: '',
				page: 1,
				show: false,
				business: {},
				list: [],
				delmsg: 0,
				acceptid: 0,
				content: '是否确认删除私信',
			}
		},
		methods:{
			async ToInfo(msgid){
				var data = {
					msgid: msgid
				}

				var result = await uni.$u.http.post('/business/read',data)

				if(result.code == 0){
					return false
				}else{
					this.MsgData()
					uni.$u.route('/pages/business/msginfo',{msgid: msgid})
				}

				
			},
			ToBus(busid){
				uni.$u.route('/pages/business/center',{busid: busid})
			},
			del(id){
				this.delmsg = id
				this.show = true
			},
			sendmsg(id){
				this.acceptid = id
				this.AnswerShow = true
			},
			async confirm()
			{
				this.show = false
				// console.log(this.delmsg)
				var data = {
					msgid: this.delmsg
				}

				var result = await uni.$u.http.post('/business/msgdel',data)

				if(result.code == 0){
					this.$refs.notice.show({
						type: 'error',
						message: result.msg
					})
					return false
				}else{
					this.$refs.notice.show({
						type: 'success',
						message: result.msg
					})
					this.list = [];
					this.MsgData();
				}
			},
			search()
			{
				this.list = []

				this.MsgData()
			},
			//上拉加载
			onReachBottom()
			{
				if(this.finished) return;

				this.page++
				this.MsgData()
			},
			onPageScroll(e) 
			{
				this.scrollTop = e.scrollTop;
			},
			async MsgData(){
				// 组装数据
				var data = {
					busid: this.business.id,
					page: this.page,
					keywords: this.keywords
				}

				var result = await uni.$u.http.post('/business/msg',data)

				this.triggered = false

				if(result.code == 0){
					this.finished = true
					this.$refs.notice.show({
						type: 'error',
						message: result.msg
					})
					return false
				}else{
					// console.log(result.data)
					this.list = result.data
				}
			},
			//刷新事件
			refresh() 
			{
				this.triggered = true;
				this.finished = false;

				this.list = []

				this.MsgData()
				// console.log(this.postlist)
			},
			loadmore()
			{
				// console.log('上拉加载')
			},
			submit()
			{
				//判断是否有通过表单验证
				this.$refs.answer.validate()
				.then(async res => {
					this.AnswerShow = false
					this.$refs.notice.show({
						type: 'success',
						message: '通过表单验证'
					})
					// console.log(this.comment)

					if(!this.business || !this.business.id){
						this.$refs.notice.show({
							type: 'error',
							message: '请先登录'
						})

						return false
					}

					var data = {
						busid: this.business.id,
						accept: this.acceptid,
						content: this.comment.content
					}

					// console.log(data)
					var result = await uni.$u.http.post('/business/send',data)

					if(result.code == 0){
						this.$refs.notice.show({
							type: 'error',
							message: result.msg
						})
						return false
					}else{
						this.$refs.notice.show({
							type: 'success',
							message: result.msg
						})
						this.comment.content = ''
					}

				})
				.catch(error => {
					console.log(error)
					this.$refs.notice.show({
						type: 'error',
						message: '效验失败'
					})
				})
			}
		}
	}
</script>

<style>
	.content{
		width:100%;
		overflow-x: hidden;
	}
	.search {
		height: 238rpx;
		background-image: url("/static/titlebg.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center;
		padding: 0 28rpx;
		display: flex;
		align-items: center;
		align-content: center;
	}

	.search-area {
		width: 100%;
		height: 88rpx;
		background-color: #fff;
		background-image: url("/static/search.png");
		background-repeat: no-repeat;
		background-size: 30rpx 30rpx;
		background-position: 35rpx 30rpx;
		border-radius: 11rpx;
		line-height: 88rpx;
		text-indent: 78rpx;
		color: #2f2e2e;
		font-size: 30rpx;
	}

	.list .item{
		display: flex;
		width:95%;
		margin:10px auto;
	}

	.business{
		width:20%;
		flex-shrink: 0;
		overflow: hidden;
		border-radius: 10px;
		margin-right:10px;
	}

	.avatar{
		width:100%;
		height:5em;
	}

	.avatar image{
		width:100%;
		height:100%;
	}

	.info{
		font-size:.9em;
		color:#999;
	}

	.info .nickname, .info .desc{
		margin-bottom:2px;
	}

	.info .nickname{
		font-size:1.1em;
		width:95%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color:#000;
		font-weight: bold;
	}

	.info .desc{
		font-size:.8em;
		width:100%;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		margin-bottom:.5em;
		/* 改成你需要的行数 */
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.info .action{
		display: flex;
		width:100%;
		justify-content: flex-end;
	}

	.info .action .btn{
		margin-right:10px;
	}
</style>
